<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="codemirror.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>

<script type="text" id="code1">
var React = require('react');
var Halogen = require('halogen');
var Example = React.createClass({
    render: function() {

        // try change me to a custom color like "red" or "#000000"
        var color = '#4DAF7C';

        var style = {
            display: '-webkit-flex',
            display: 'flex',
            WebkitFlex: '0 1 auto',
            flex: '0 1 auto',
            WebkitFlexDirection: 'column',
            flexDirection: 'column',
            WebkitFlexGrow: 1,
            flexGrow: 1,
            WebkitFlexShrink: 0,
            flexShrink: 0,
            WebkitFlexBasis: '25%',
            flexBasis: '25%',
            maxWidth: '25%',
            height: '200px',
            WebkitAlignItems: 'center',
            alignItems: 'center',
            WebkitJustifyContent: 'center',
            justifyContent: 'center'
        };

        return (
            <div style={{
                boxSizing: 'border-box',
                display: '-webkit-flex',
                display: 'flex',
                WebkitFlex: '0 1 auto',
                flex: '0 1 auto',
                WebkitFlexDirection: 'row',
                flexDirection: 'row',
                WebkitFlexWrap: 'wrap',
                flexWrap: 'wrap'
            }}>
                <div style={style}>PulseLoader<Halogen.PulseLoader color={color}/></div>
                <div style={style}>GridLoader<Halogen.GridLoader color={color}/></div>
                <div style={style}>ClipLoader<Halogen.ClipLoader color={color}/></div>
                <div style={style}>RiseLoader<Halogen.RiseLoader color={color}/></div>
                <div style={style}>BeatLoader<Halogen.BeatLoader color={color}/></div>
                <div style={style}>SyncLoader<Halogen.SyncLoader color={color}/></div>
                <div style={style}>RotateLoader<Halogen.RotateLoader color={color}/></div>
                <div style={style}>FadeLoader<Halogen.FadeLoader color={color}/></div>
                <div style={style}>PacmanLoader<Halogen.PacmanLoader color={color}/></div>
                <div style={style}>SquareLoader<Halogen.SquareLoader color={color}/></div>
                <div style={style}>ScaleLoader<Halogen.ScaleLoader color={color}/></div>
                <div style={style}>SkewLoader<Halogen.SkewLoader color={color}/></div>
                <div style={style}>MoonLoader<Halogen.MoonLoader color={color}/></div>
                <div style={style}>RingLoader<Halogen.RingLoader color={color}/></div>
                <div style={style}>BounceLoader<Halogen.BounceLoader color={color}/></div>
                <div style={style}>DotLoader<Halogen.DotLoader color={color}/></div>
            </div>
        );
    }
});
return <Example/>

</script>


<header class="row">
    <div class="container">
        <h1 class="logo">
            Halogen
        </h1>
    </div>
</header>

<main class="container">
    <div class="row">
        <div class="center">
            <code class="installer">npm install halogen</code>
        </div>
    </div>


    <div class="row">
        <div class="example" id="example1">loading...</div>
    </div>

</main>

<footer class="row">
    <div class="container">
        <p class="center">
            <a href="https://github.com/yuanyan/halogen">Github</a>
        </p>
    </div>
</footer>

<a href="https://github.com/yuanyan/halogen"><img style="position: absolute; top: 0; right: 0; border: 0;"
                                                  src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
                                                  alt="Fork me on GitHub"
                                                  data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

<script src="codemirror.js"></script>
<script src="javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

<script src="common.js"></script>
<script src="bundle.js"></script>
<script src="app.js"></script>
</body>
</html>
